import React, {memo, useEffect, useState} from 'react';
import ILikeItStyle from "./ILikeItStyle";
import {useNavigate} from "react-router-dom";
import {Table} from "antd";
import {getHourMineSecondBySecond} from "../../../../utils/timeFormatting";
import {MusicCollect} from "../../../../interface/MusicCollectInterface";
import {getMusicCollectPageApi} from "../../../../services/musicCollect";
import {getMusicByPageAPI} from "../../../../services/music";
import {MusicInsertDTO} from "../../../../interface/MusicInterface";
import {getCollectMusicListApi} from "../../../../services/collect";

type Props = {};

type TableDataType={
  musicName:string,
  musicSinger:string,
  musicAlbum:string,
  musicTimer:number,
};
export default memo(function ILikeIt(props: Props) {
  const {Column} = Table;
  const userId=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  const navigate=useNavigate();
  const [musicList,setMusicList]=useState<MusicCollect[]>();
  useEffect(() => {
    getCollectMusicListApi({pageNum:0,pageSize:10,userId,isDelete:0}).then((result:any)=>{
      setMusicList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <ILikeItStyle>
      <Table dataSource={musicList} >
        <Column title="歌曲名称" dataIndex="name" key="name"
          render={(_:any,record:MusicInsertDTO)=>{
            return(<div className="music-name-td">
              <span className="music-name">{record.name}</span>
              <span className="music-btn music-play-btn iconfont">&#xe624;</span>
              <span className="music-btn music-add-btn iconfont">&#xe84f;</span>
            </div>);
          }}
        />
        <Column title="歌手" dataIndex="singerName" key="singerName"/>
        <Column title="专辑" dataIndex="albumName" key="albumName"/>
        <Column title="时长" dataIndex="timer" key="timer"
                render={(_:any,record:MusicInsertDTO)=>{
                  return (<>{getHourMineSecondBySecond(record.timer as number)}</>)
                }}
        />
      </Table>
    </ILikeItStyle>
  );
});
